<!--
 * @Author: xujianwei
 * @Date: 2021-05-08 14:55:15
 * @LastEditors: xujianwei
 * @LastEditTime: 2021-05-08 18:05:34
-->
<template>
  <div class="note markdown-here-wrapper" v-html='html'></div>
</template>

<script>
// import str from './sjms.md'
import markdownit from 'markdown-it'
import { onMounted,ref} from 'vue'
import {mdImport} from '@/api/util.ts'
import axios from 'axios'
import hljs from 'highlight.js'
// 引入默认样式
import 'highlight.js/scss/default.scss'
import 'highlight.js/styles/solarized-dark.css'
import markdownItTocAndAnchor from 'markdown-it-toc-and-anchor'
export default {
    setup(){
        let md = markdownit({
            html: true,
            linkify: true,
            typographer: true,
            highlight: function (str, lang) {
                if (lang && hljs.getLanguage(lang)) {
                    try {
                        // 得到经过highlight.js之后的html代码
                        const preCode = hljs.highlight(lang, str, true).value
                        // 以换行进行分割
                        const lines = preCode.split(/\n/).slice(0, -1)
                        // 添加自定义行号
                        let html = lines.map((item, index) => {
                        return `<li><span class="line-num" data-line="${index + 1}"></span>${item}</li>`
                        }).join('')
                        html = `<ol>${html}</ol>`
                        // 添加代码语言
                        if (lines.length) {
                            html += `<b class="name">${lang}</b>`
                        }
                        return `<pre class="hljs"><code>${html}</code></pre>`
                    } catch (_) {}
                }
                // 未添加代码语言，此处与上面同理
                const preCode = md.utils.escapeHtml(str)
                const lines = preCode.split(/\n/).slice(0, -1)
                let html = lines.map((item, index) => {
                return `<li><span class="line-num" data-line="${index + 1}"></span>${item}</li>`
                }).join('')
                html =  `<ol>${html}</ol>`
                return `<pre class="hljs"><code>${html}</code></pre>`
            }
        })
        .use(markdownItTocAndAnchor, {
        // ...options
        })
        let html = ref('')
        // console.log(md.render(str))
        onMounted(async _=>{
            let str = await mdImport()
            console.log(str)
            html.value = md.render("@[TOC]" + str)
            console.log(str)

        })

        return{
            html
        }
    }
}
</script>

<style lang='scss'>
@import './id.scss';
.note{
    padding:0 50px 50px;
    background: #f5f5d5;
    pre.hljs {
        padding: 8px 2px;
        border-radius: 5px;
        position: relative;
        ol {
            list-style: decimal;
            margin: 0;
            margin-left: 40px;
            padding: 0;
            li {
                list-style: decimal-leading-zero;
                position: relative;
                padding-left: 10px;
                .line-num {
                    position: absolute;
                    left: -40px;
                    top: 0;
                    width: 40px;
                    height: 100%;
                    border-right: 1px solid rgba(0, 0, 0, .66);
                }
            }
        }
        b.name {
            position: absolute;
            top: 2px;
            right: 12px;
            z-index: 10;
            color: #999;
            pointer-events: none;
        }
    }
}
</style>